@tailwind base;
@tailwind components;
@tailwind utilities;

/* 基础样式 */
@layer base {
  body {
    @apply antialiased text-gray-800  dark:bg-gray-900;
  }

  /* 平滑滚动 */
  html {
    scroll-behavior: smooth;
  }

  /* 选中文本样式 */
  ::selection {
    @apply bg-primary-light/20 dark:bg-primary-light/30;
  }
}

/* 自定义代码块样式 */
.prose pre {
  @apply rounded-lg border p-4 bg-gray-50 dark:bg-gray-800/80 relative;
}

.prose pre code {
  @apply block overflow-x-auto;
}

/* 代码块标题 */
.prose pre::before {
  content: attr(data-language);
  @apply absolute top-0 right-0 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 rounded-bl-lg rounded-tr-lg;
}

/* 代码行高亮 */
.prose pre .highlighted {
  @apply bg-gray-700 dark:bg-gray-700/50;
}

/* 代码块复制按钮 */
.prose pre .copy-button {
  @apply absolute top-2 right-2 p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200;
}

/* 标题样式 */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  @apply scroll-mt-20 relative   text-gray-900 dark:text-gray-50;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* 标题悬停动画 */
.prose h1::after,
.prose h2::after,
.prose h3::after,
.prose h4::after,
.prose h5::after,
.prose h6::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: theme("colors.primary.light");
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.prose h1:hover,
.prose h2:hover,
.prose h3:hover,
.prose h4:hover,
.prose h5:hover,
.prose h6:hover {
  text-decoration: none;
}

.prose h1:hover::after,
.prose h2:hover::after,
.prose h3:hover::after,
.prose h4:hover::after,
.prose h5:hover::after,
.prose h6:hover::after {
  transform: scaleX(1);
}

/* 标题锚点链接 */
.prose .anchor-link {
  @apply opacity-0 hover:opacity-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300;
  margin-left: 0.5rem;
}

/* 表格样式 */
.prose table {
  @apply w-full border-collapse text-gray-700 dark:text-gray-200;
}

.prose th {
  @apply bg-gray-50 dark:bg-gray-800/50 text-gray-900 dark:text-gray-50;
}

.prose td,
.prose th {
  @apply border border-gray-200 dark:border-gray-700 p-2;
}

/* 引用块样式 */
.prose blockquote {
  @apply text-gray-700 dark:text-gray-200 border-l-4 border-primary-light dark:border-primary-light pl-4 italic bg-gray-50 dark:bg-gray-800/50;
}

/* 列表样式 */
.prose ul {
  @apply list-disc list-inside text-gray-700 dark:text-gray-200;
}

.prose ol {
  @apply list-decimal list-inside text-gray-700 dark:text-gray-200;
}

.prose li {
  @apply text-gray-700 dark:text-gray-200;
}

/* 链接样式 */
.prose a {
  @apply text-primary-light  dark:text-primary-light dark:hover:text-primary-light/80 underline;
}

/* 图片样式 */
.prose img {
  @apply rounded-lg;
}

/* 行内代码样式 */
.prose code:not(pre code) {
  @apply text-gray-800 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono;
}

/* 分割线样式 */
.prose hr {
  @apply border-gray-200 dark:border-gray-700;
}

/* 任务列表样式 */
.prose input[type="checkbox"] {
  @apply mr-2 border-gray-300 dark:border-gray-600;
}

/* 数学公式样式 */
.prose .math {
  @apply text-gray-700 dark:text-gray-200;
}

/* 脚注样式 */
.prose .footnotes {
  @apply mt-8 pt-4 border-t border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300;
}

.prose .footnotes ol {
  @apply list-decimal list-inside;
}

.prose .footnote-ref {
  @apply text-primary-light hover:text-primary-dark dark:text-primary-light dark:hover:text-primary-light/80;
}

/* 目录样式 */
.prose .toc {
  @apply bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg mb-8;
}

.prose .toc ul {
  @apply list-none;
}

.prose .toc li {
  @apply mb-2;
}

.prose .toc a {
  @apply text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-light/80;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

/* 过渡效果 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* 暗色模式过渡 */
.dark {
  color-scheme: dark;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .prose {
    @apply text-base;
  }

  .prose h1 {
    @apply text-2xl;
  }

  .prose h2 {
    @apply text-xl;
  }

  .prose h3 {
    @apply text-lg;
  }
}
